@keyframes armPlay {
  0%{
    transform: rotate(15deg);
  }
  100%{
    transform: rotate(20deg);
  }
}

@keyframes lyricWordDisplay {
  0%{
    width: 0;
  }
  100%{
    width: 100%;
  }

}

@keyframes lyricWordDisplay2 {
  0%{
    background-position: 100%;

  }
  100%{
    background-position: 0;

  }

}

//.lyric-body .lyric-content p.playing {
//  height: 30px;
//  font-size: 30px;
//  line-height: 30px;
//
//}

.lyric-body .lyric-content.lrc .playing{
  color: #1ecf9d;
}

.lyric-body .lyric-content.qrc .playing span{
  position: relative;
  white-space: nowrap;
  color: transparent;
  font-weight: 500;
  background: linear-gradient(to right, #1ecf9d 0%, #1ecf9d 50%,#fff 51%,#fff 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position: 100% -50%;

  &.played{
    background-position: 0;
  }

  &.play{
    //animation-play-state: running;
  }

  &.no{

  }

}

.lyric-body .lyric-content.qrc .pause span{
  position: relative;
  white-space: nowrap;
  color: transparent;
  font-weight: 500;
  background: linear-gradient(to right, #1ecf9d 0%, #1ecf9d 50%,#fff 51%,#fff 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  background-position: 100% -50%;

  &.played{
    background-position: 0;
  }

  &.play{
    animation-play-state: paused !important;
  }

  &.no{

  }

}

.el-drawer__body{
  &::-webkit-scrollbar{
    height: 10px;
    width: 10px;
  }
  //overflow-y: scroll;
  //scroll-behavior: auto;

  &::-webkit-scrollbar-thumb{
    background-color: #d3d3d3;
    border-radius: 5px;
  }
}